import { useState, useCallback, useEffect, createElement } from 'react';
import { Tabs } from 'antd-mobile';
import styles from './index.less';
import UserTab from './UserTab';
import UserGroupTab from './UserGroupTab';
import PositionTab from './PositionTab';
import DepartmentTab from './DepaertmentTab';
import { MemberSelectProps } from './index.type';
import NavBar from './NavBar';
import { getMessage } from '@inbiz/react';
const { Tab } = Tabs;

const tabMap = {
  user: {
    comp: UserTab,
    lang: 'personTabs.user',
  },
  group: {
    comp: UserGroupTab,
    lang: 'personTabs.userGroup',
  },
  position: {
    comp: PositionTab,
    lang: 'personTabs.position',
  },
  department: {
    comp: DepartmentTab,
    lang: 'personTabs.department',
  },
};

function MemberSelect(props: MemberSelectProps, ref: any) {
  const { tabs, multiple, onOk, onCancel, hideTabBar } = props;
  const [currentTab, _currentTab] = useState<string>('');
  const [selected, _selected] = useState<any[]>([]);
  const [selectedId, _selectedId] = useState<any[]>([]);

  const setSelected = (sel: any) => {
    _selected(sel);
    _selectedId(sel.map((item: any) => item?.key));
    props?.emit && props?.emit('onSelect', sel);
  };

  useEffect(() => {
    _currentTab(props.tabs[0] || '');
    _selected(props.selected || []);
    _selectedId((props.selected || []).map((item: any) => item?.key));
  }, []);

  const updateSelected = useCallback(
    (checked, row) => {
      if (multiple) {
        let index = selectedId.indexOf(row?.key);
        if (checked) {
          if (index == -1) {
            let newSelected = [...selected, row];
            setSelected(newSelected);
          }
        } else {
          if (index > -1) {
            let newSelected = [...selected];
            newSelected.splice(index, 1);
            setSelected(newSelected);
          }
        }
      } else {
        if (checked) {
          setSelected([row]);
        } else {
          setSelected([]);
        }
      }
    },
    [selected, selectedId, multiple],
  );

  const tabProps = useCallback(
    (key: 'user' | 'group' | 'position' | 'department') => ({
      tabKey: key,
      multiple,
      allSelected: selected,
      selectedId: selectedId.filter((item: any) => {
        return item?.startsWith(key);
      }),
      selected: selected.filter((item: any) => {
        return item?.key?.startsWith(key);
      }),
      updateSelected: updateSelected,
      setSelected: setSelected,
      onOk: () => {
        onOk(selected);
      },
      onCancel: () => {
        onCancel();
      },
    }),
    [selected, selectedId],
  );

  return (
    <div className={styles.content}>
      <NavBar onBack={onCancel} />
      <Tabs
        onChange={_currentTab}
        activeKey={currentTab}
        className={`${styles.tabs} ${hideTabBar ? styles.hideTabBar : ''}`}
      >
        {tabs.map((name) => {
          const item = tabMap[name];
          if (!item) {
            return null;
          }
          return (
            <Tab key={name} title={getMessage(`WapMemberSelect.lang.${item.lang}`)}>
              {createElement(item.comp, tabProps(name))}
            </Tab>
          );
        })}
      </Tabs>
    </div>
  );
}

export default MemberSelect;
